/*
 * @Description:需求登记
 */

import React, { useState } from 'react';
import { useAntdTable } from 'ahooks';
import dayjs from 'dayjs';
import { Button, Form, Input, Row, message, Space, DatePicker, Table, Modal, Select, Col } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import { bugRegisterEdit, bugRegisterQryPage, bugRegisterAdd } from '@/config/request/manage';

import EditDemoInfo from './module/EditDemoInfo';
import './index.scss';

const SupplierList: React.FC = () => {
    const [form] = Form.useForm();
    const formModalSupplierInfo = useFormModal();
    const [rowItem, setRowItem] = useState<any>();
    const [isEditInfo, setIsEditInfo] = useState(false);

    const { tableProps, search } = useAntdTable(
        async ({ pageSize, current: pageNum }) => {
            const { createTime } = form.getFieldsValue();
            const params = {
                ...form.getFieldsValue(),
                startTime: createTime?.[0]?.format('YYYY-MM-DD 00:00:00'),
                endTime: createTime?.[1]?.format('YYYY-MM-DD 23:59:59'),
                pageNum,
                pageSize,
                // supplierType
            };
            delete params.createTime;
            const res = await bugRegisterQryPage(params);
            return {
                total: res.data.data?.total ?? 0,
                list: res.data.data?.list ?? [],
            };
        },
        { defaultPageSize: 10, form }
    );

    const columns: ColumnsType<any> = [
    
        {
            title: '需求类型',
            dataIndex: 'demoType',
            key: 'demoType',
            width: 50,
            render: (text) => <span>{['', '项目', '日常迭代', '快速需求', '技改', 'bugfix'][text]}</span>,
        },
        {
            title: '需求状态',
            dataIndex: 'demoStatus',
            key: 'demoStatus',
            width: 50,
            render: (text) => <span>{['开发中', '测试中', '已发布', '需求中'][text]}</span>,
        },
        {
            title: '需求名称',
            dataIndex: 'demoName',
            key: 'demoName',
            width: 50,
        },
        {
            title: 'PM',
            dataIndex: 'demoPm',
            key: 'demoPm',
            width: 30,
        },
        {
            title: 'PD',
            dataIndex: 'demoPersone',
            key: 'demoPersone',
            width: 30,
        },
        {
            title: '后端开发',
            dataIndex: 'demoDeveloper1',
            key: 'demoDeveloper1',
            width: 60,
        },
        {
            title: '前端开发',
            dataIndex: 'demoDeveloper2',
            key: 'demoDeveloper2',
            width: 60,
        },
        {
            title: '测试人员',
            dataIndex: 'demoTester',
            key: 'demoTester',
            width: 60,
        },
        {
            title: '发布时间',
            dataIndex: 'demoDate',
            key: 'demoDate',
            width: 42,
        },
        {
            title: '冒烟通过率',
            dataIndex: 'smokeRate',
            key: 'smokeRate',
            width: 50,
        },
        
        {
            title: '备注',
            dataIndex: 'demoRemark',
            key: 'demoRemark',
            width: 200,
        },
        {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 60,
            render: (_: any, record: any) => {
                return (
                    <Space size="middle" className="flex-col">
                        <Button
                            type="link"
                            size="small"
                            onClick={() => {
                                setRowItem(record);
                                setIsEditInfo(true);
                                formModalSupplierInfo.modal.open();
                            }}
                        >
                            修改
                        </Button>
                    </Space>
                );
            },
        },
    ];

    // 新增/修改供应商信息
    const editDemoInfo = async () => {
        const params = await formModalSupplierInfo.form.validateFields();
        params.bugTime = dayjs(params.bugTime).format('YYYY-MM-DD 00:00:00');
        try {
            const response = isEditInfo ?
                await bugRegisterEdit({
                    ...rowItem,
                    ...params,
                }) :
                await bugRegisterAdd(params);
            if (response.data.code === 200) {
                message.success('保存成功！');
                formModalSupplierInfo.modal.close();
                search.submit();
            }
        } catch (error: any) {
            message.error(error);
        }
    };

    return (
        <div className="bg-white p-2.5">
            <Form form={form} name="supplierList_search">
                <Row>
                    <Col span={6}>
                        <Form.Item label="需求名称" name="demoName">
                            <Input placeholder="请输入" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label="需求类型" name="demoType">
                            <Select
                                placeholder="请选择需求类型"
                                options={[
                                    { label: '全部', value: '' },
                                    { label: '项目', value: '0' },
                                    { label: '日常迭代', value: '1' },
                                    { label: '快速需求', value: '2' },
                                    { label: '技改', value: '3' },
                                    { label: 'bugfix', value: '4' },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label="需求状态" name="demoStatus">
                            <Select
                                placeholder="请选择需求状态"
                                options={[
                                    { label: '全部', value: '' },
                                    { label: '需求中', value: '1' },
                                    { label: '开发中', value: '2' },
                                    { label: '测试中', value: '3' },
                                    { label: '已发布', value: '4' },
                                    { label: '已暂停', value: '5' },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                   
                    <Col span={6}>
                        <Form.Item label="发布日期" name="demoDate">
                            <DatePicker.RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                        </Form.Item>
                    </Col>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Form.Item>
                            <Space size="small">
                                <Button type="primary" htmlType="submit" onClick={search.submit}>
                                    搜索
                                </Button>
                                <Button type="primary" onClick={search.reset}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
                <div style={{ textAlign: 'left', marginBottom: 16 }}>
                    <Button
                        type="primary"
                        className="mt-5 mb-5"
                        onClick={() => {
                            setIsEditInfo(false);
                            setRowItem({});
                            formModalSupplierInfo.modal.open();
                        }}
                    >
                        需求登记
                    </Button>
                </div>

                <Table
                    {...tableProps}
                    bordered
                    columns={columns}
                    rowKey="bugId"
                    locale={{ emptyText: '暂无数据' }}
                    scroll={{ x: 'calc(100vw + 1000px)' }}
                />
            </Form>
            <Modal
                destroyOnClose
                open={formModalSupplierInfo.isOpen}
                onOk={() => editDemoInfo()}
                onCancel={() => {
                    formModalSupplierInfo.modal.close();
                }}
                title={isEditInfo ? '修改线上故障信息' : '新增线上故障'}
                className="supplierInfoModal"
                okText="确定"
                cancelText="取消"
                maskClosable={false}
            >
                <EditDemoInfo formModal={formModalSupplierInfo} rowItem={rowItem} />
            </Modal>
        </div>
    );
};

export default SupplierList;
